<template>
    <div class="article-container">
        <el-card class="filter-card">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item to="/gome">首页</el-breadcrumb-item>
                <el-breadcrumb-item>评论分析</el-breadcrumb-item>
            </el-breadcrumb>
            <!-- /数据筛选表单 -->
        </el-card>

        <el-card class="box-card">
            <div slot="header" class="clearfix">
                根据筛选条件共查询到 {{ Comments.length }} 条结果：
            </div>
            <el-table :data="Comments.slice(
                (currentPage - 1) * pagesize,
                currentPage * pagesize
            )" stripe style="width: 100%" class="list-table" size="mini" v-loading="loading">
                <el-table-column prop="title" label="标题">
                </el-table-column>
                <el-table-column prop="all_commnet" label="总评论数">
                </el-table-column>
                <el-table-column prop="fans_commnet" label="粉丝评论数">
                </el-table-column>
                <el-table-column label="评论状态">
                    <template slot-scope="{row,$index}">
                        {{ row.comment_state ? '正常' : '关闭' }}
                    </template>
                </el-table-column>
                <el-table-column label="状态改变">
                    <template slot-scope="{row,$index}">
                        <el-switch v-model="row.change_status"  inactive-color="#ff4949"
                            @change="onStatusChange(row)">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column width="200px" label="操作">
                    <!-- 如果需要自定义表格列模板，则把需要自定义的内容放到 template 里面 -->
                    <template slot-scope="{row,$index}">
                        <el-button size="mini" type="danger" icon="el-icon-delete" circle
                            @click="onDeleteComments(row.id)">
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination layout="  prev, pager, next, sizes, jumper" :page-sizes="[5, 10]" :page-size="pagesize"
                :total="Comments.length" :pager-count="5" :current-page="currentPage"
                @current-change="handleCurrentChange" @size-change="handleSizeChange">
            </el-pagination>
            <!-- /列表分页 -->
        </el-card>
    </div>
</template>
    
<script>
import { getComments, corrComments, deleteComments } from '@/api/comments'

export default {
    name: 'CommentsIndex',
    data() {
        return {
            Comments: [], // 评论数据列表
            totalCount: 0, // 总数据条数
            status: null, // 查询评论的状态，不传就是全部
            loading: true, // 表单数据加载中 loading
            currentPage: 1, //展示第几页
            pagesize: 5, //每页的数据条数
            change_status: false
        }
    },
    async created() {
        this.loadComments()
    },

    methods: {
        //获取评论列表
        async loadComments() {
            // 展示加载中 loading
            this.loading = true;
            getComments().then((res) => {
                console.log(res, 'flow');
                this.Comments = res || [];
                console.log(this.Comments.comment_state, "commentestatus");
            });
            // 关闭加载中 loading
            this.loading = false;
        },

        //改变评论状态
        onStatusChange(currRow) {
            console.log(currRow, "safasfasf");
            // 禁用开关
            // this.comments[currRow].comment_state = !this.comments[currRow].comment_state;
            this.change_status = !this.change_status
            currRow.comment_state = this.change_status;
            console.log(currRow.comment_state, "currRow.id");
            let params = {
                comment_state: currRow.comment_state
            }
            console.log(this.change_status, "this.change_status");
            // 请求提交修改
            corrComments(currRow.id.toString(), params).then(res => {
                // 启用开关
                this.$message({
                    type: 'success',
                    message: this.change_status ? '开启文章评论状态' : '关闭文章评论状态'
                })
            })
        },
        // 删除评论分析
        onDeleteComments(id) {
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                deleteComments(id).then(res => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.loadComments();
                }).catch(err => {
                    console.log("获取数据失败" + err);
                    this.$message({
                        message: '删除失败'
                    });
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 分页
        handleCurrentChange(val) {
            this.currentPage = val;
        },
        handleSizeChange(val) {
            this.pagesize = val;
            this.currentPage = 1
        },
    }
}
</script>
    
<style scoped lang="less">
.filter-card {
    margin-bottom: 30px;
}

.list-table {
    margin-bottom: 20px;
}

.article-cover {
    width: 60px;
    background-size: cover;
}
</style>
    